<template>
  <el-row :gutter="3">

    <!-- 搜索 -->
    <el-col :span="7">
      <div class="grid-content bg-purple">
        <el-input placeholder="请输入内容" 
        class="input-with-select" 
        v-model="query"
        :clearable="true"
        @clear="inputContentClear"></el-input>
      </div>
    </el-col>

    <!-- 搜索按钮 -->
    <el-col :span="2">
      <div class="grid-content bg-purple">
        <el-button type="primary" icon="el-icon-search" @click="search"></el-button>
      </div>
    </el-col>

    <!-- 添加用户按钮 -->
    <el-col :span="2">
        <el-button type="primary" @click="openDialog">添加用户</el-button>
    </el-col>
</el-row>

</template>

<script>
export default {
  data() {
    return {
      query: ''
    }
  },
  methods: {
    search() { // 搜索按钮触发
      this.$bus.$emit('getUserList');
    },
    inputContentClear() { // input框清空触发
      this.$bus.$emit('resetPageSize'); // 将页面重置为第一页
      this.$bus.$emit('getUserList'); // 获取全部数据
    },
    openDialog() { // 打开Dialog组件
      this.$bus.$emit('openDialog');
    }
  }
}
</script>

<style lang="scss" scoped>
</style>